import Title from "../Title"
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade, Autoplay, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/effect-fade';
import "swiper/css/pagination";
import "swiper/css/autoplay";
import styles from './styles.module.scss'
import Link from 'next/link'
import VideoIcon from '@/assets/videoicon.png'
import RenderJudge from "../RenderJudge";
import classNames from "classnames";
const url = process.env.NEXT_PUBLIC_URLPROXY
import Image from "../Image";
const NewsBlock = ({ text, img, hasRight, data, link, more }) => {
  console.log(data, '-------')
  if (data?.swiperData.length === 0) return <></>
  return (
    <>
      <blockquote style={{ height: 20 }}></blockquote>
      <Title more={more} text={text} img={img} hasRight={hasRight}></Title>
      <blockquote style={{ height: 20 }}></blockquote>
      <section className={styles.newsblock}>
        <Swiper
          watchSlidesProgress
          modules={[EffectFade, Autoplay]}
          effect="fade"
          autoplay={{ delay: 2000, pauseOnMouseEnter: true, disableOnInteraction: false }}
          pagination={{
            dynamicBullets: true
          }}
          loop>
          {data?.swiperData.map((row, index) => {
            const imgUrl = (s) => {
              if (s?.newsImg) {
                return url + `?url=${s?.newsImg}`
              }
              return row?.coverImg
            }
            return (<SwiperSlide key={index} >
              <Link href={link(row)} >
                <a target="_blank" className={styles.swiperContents} title={row?.title || row?.newsTitle}>
                  <Image type={3} src={imgUrl(row)} alt={row?.title || row?.newsTitle} ></Image>
                  <RenderJudge value={row.videoUrl} active={(
                    <img src={VideoIcon.src} className={styles.video} />
                  )} />
                  <span className={classNames(styles.title, 'textoverone')}>{row?.title || row?.newsTitle}</span>
                </a>
              </Link>
            </SwiperSlide>)
          })}
        </Swiper>
        <ul>
          {
            data?.otherData.map(row => (
              <Link href={link(row)} key={row.id} target="_blank">
                <a title={row?.title || row?.newsTitle}>
                  <span></span>
                  <span className="textoverone">{row?.title || row?.newsTitle} </span>
                </a>
              </Link>
            ))
          }
        </ul>
      </section>
    </>
  )
}


export default NewsBlock